<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>列表增删改查</title>
    <!-- 导入vue包 -->
    <script src="./lib/vue2.6.10.js"></script>
    <link rel="stylesheet" href="./lib/bootstrap3.3.7.css">
</head>
<body>
    <div id="app">
        
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title" v-color="'#989'" v-fontsize="'25'">添加</h3>
            </div>
            <div class="panel-body form-iniline">
                <label>
                    Id: <input type="text" v-model="id">
                    <!-- 按键绑定@keyup.键盘码 -->
                    Name: <input type="text" v-model="name" @keyup.enter="add">
                </label> 
                <label>
                    <input type="button" value="添加" class="btn btn-primary" @click="add">
                </label>
                <label>
                    搜索的关键字： <input type="text" v-model="kw" v-focus>
                </label>

            </div>
        </div>


        <table class="table table-bordered table-hover table-striped">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Ctime</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in search(kw)" :key="index">
                    <td>{{ item.id }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.ctime | dateFromat}}</td>
                    <td><a href="" @click.prevent="del(item.id)">删除</a></td>
                </tr>
            </tbody>
        </table>

    </div>


    <script>

        //全局过滤器
        Vue.filter('dateFromat',function(dataStr,pattern){
            var dt = new Date(dataStr);
            var y = dt.getFullYear();
            var m = (dt.getMonth() + 1).toString().padStart(2,'0');
            var d = dt.getDate().toString().padStart(2,'0');
            var hh = dt.getHours().toString().padStart(2,'0');
            var mm = dt.getMinutes().toString().padStart(2,'0');
            var ss = dt.getSeconds().toString().padStart(2,'0');
            return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
        });

        // 参数1 指令名称，定义不需要加v-前缀 但是使用的时候必须加
        // 参数2 对象，定义指令相关方法(钩子)
        Vue.directive('focus',{
            inserted: function(el){
                el.focus();
            }
        });
        Vue.directive('color',{
            // 生命周期方法（全局钩子）
            bind(el, binding){ // 指令绑定到DOM的时候
                el.style.color = binding.value;
                console.log(binding);
            },
            inserted(el){  // 指令绑定的DOM被渲染出来

            },
            updated() {  // 指令绑定的DOM更新
                
            },

        })
        // 创建一个vue实例
        var vm = new Vue({
            el:'#app', // 当前new的这个vue实例要控制的DOM
            data:{     // 所有的数据
                id: '',
                name:'',
                kw: '',
                items: [
                    {id: 1, name: "qqq", ctime: new Date()},
                    {id: 2, name: "www", ctime: new Date()},
                    {id: 3, name: "eee", ctime: new Date()},
                ]
            },
            methods: {
                add(){
                    if (this.id== '') {
                        alert('不能啥都没有吧？');
                        return false;
                    }
                    this.items.push({id: this.id,name: this.name,ctime: new Date()});
                    this.id = this.name = '';
                },
                del(id){
                    this.items.some((item,i) => {
                        if(item.id = id){
                            this.items.splice(i,1);
                            return true;
                        }
                    });
                },
                search(kw){
                    var resItems=[];
                    this.items.forEach(item => {
                        if(item.name.indexOf(kw) != -1){
                            resItems.push(item);
                        }
                    });
                    return resItems;
                }
            },
            // 私有过滤器
            filters: {
                dateFromat: function(dataStr){
                    var dt = new Date(dataStr);
                    var y = dt.getFullYear();
                    var m = (dt.getMonth() + 1).toString().padStart(2,'0');
                    var d = dt.getDate().toString().padStart(2,'0');
                    return `${y}-${m}-${d}`;
                }
            },
            directives:{
                'fontsize':{
                    bind(el, binding){
                        el.style.fontSize = parseInt(binding.value)+'px';
                    }
                }
            }
        });

    </script>
</body>
</html>